<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('newcrumbs.crumbsEle')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('myAuditList.no1')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('myAuditList.no6')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('myAuditList.no11')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="detail">
        <el-tabs v-model="activeName">
            <el-tab-pane :label="$t('loanMoney.orderDetail')" name="first">
                <orderdetail></orderdetail>
            </el-tab-pane>
            <el-tab-pane :label="$t('userList.userInfo')" name="second">
                <userdetail></userdetail>
            </el-tab-pane>
            <el-tab-pane :label="$t('userList.loanLog')" name="third">
                <loanrecord></loanrecord>
            </el-tab-pane>
            <el-tab-pane :label="$t('new.no96')" name="fourth">
                <phonelist></phonelist>
                <orderapprove></orderapprove>
                <div class="mt20" v-if="isView==-2">
                    <p class="title">{{$t('myAuditList.no9')}}</p>
                    <el-form :model="formInline" :inline="true" ref="formInline" label-width="100px" class="mt20" :rules="rules">
                        <el-form-item :label="$t('auditDetail.no28')" prop="status">
                           <el-select size="small" v-model="formInline.status" :placeholder="$t('public.placeholder')" @change="statusChange">
                                <el-option v-for="item in options1" :key="item.value" :label="$t(item.label)" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-row>
                        <el-form-item :label="$t('auditDetail.no23')" prop="rejectReason" v-if="reasonFlag">
                            <el-select size="small" v-model="formInline.rejectReason" :placeholder="$t('public.placeholder')"  @change="resonDetail">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                            </el-select>
                        </el-form-item> 
                        <el-form-item label="" prop="rejectSubReason" v-if="reasonFlag">
                            <el-select size="small" multiple v-model="formInline.rejectSubReason"  :placeholder="$t('public.placeholder')" style="width:400px;">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                            </el-select>
                        </el-form-item>
                        </el-row>
                        <el-form-item :label="$t('auditDetail.no75')" prop="rejectDay" v-if="reasonFlag">
                            <el-select size="small" v-model="formInline.rejectDay"  :placeholder="$t('public.placeholder')">
                            <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                            </el-select>
                        </el-form-item>
                        <el-row>
                        <el-form-item :label="$t('public.no37')" prop="remark">
                            <el-input type="textarea" v-model="formInline.remark" :placeholder="$t('public.no42')+'~'" maxlength="600"></el-input>
                        </el-form-item>
                        </el-row>
                        <el-form-item label=" ">
                            <el-button type="primary" @click="submitForm()" :loading="logining">{{$t('header.submit')}}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
  </div>
</template>
<script>
import orderdetail from 'src/components/component/OrderDetail';
import userdetail from 'src/components/component/UserDetail';
import loanrecord from 'src/components/component/LoanRecord';
import orderapprove from 'src/components/component/OrderApprove';
import phonelist from 'src/components/component/Phonelist';
import getReason from 'src/mixins/getRefusalReason.js';//获取驳回原因下拉
import getRejectDay from 'src/mixins/getRejectDay.js';
export default {
  components: {
    orderdetail,
    userdetail,
    loanrecord,
    orderapprove,
    phonelist
  },
  mixins:[getReason,getRejectDay],
  data () {
    return {
        activeName: 'first',
        isView:this.$route.query.isView,
        formInline:{
            orderId:this.$route.query.orderId,
            status:'',
            rejectReason:'',
            rejectSubReason:[],
            rejectDay:'',
            remark:'',
            adminId:sessionStorage.getItem('sessionid')
        },
        options1: this.$store.state.options.peopleAuditTwo_option,
        options2:[],
        options3:[],
        options4:[],
        logining: false,
        reasonFlag:false,
        rules: {
          status: [
            { required: true, message: this.$t('login.required'), trigger: 'change' }
          ],
          rejectReason: [
            { required: true, message: this.$t('login.required'), trigger: 'change' }
          ],
          rejectSubReason: [
            { required: true, message: this.$t('login.required'), trigger: 'change' }
          ],
          rejectDay: [
            { required: true, message: this.$t('login.required'), trigger: 'change' }
          ]
        },
    }
  },
  methods:{
    submitForm () { // 获取初审列表数据
      let option = {
        param: {
          ...this.formInline,
          rejectSubReason:this.formInline.rejectSubReason?this.formInline.rejectSubReason.join("|"):[]
        }       
      }
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          this.logining = true;
          this.$axios.post(this.$action.myaudit_submit, option).then(res => {
            if (res.code == 200) {
              this.$globalMsg.success(res.message)
              setTimeout(() => {
                  this.$router.push('/myauditseclist');
              }, 1000) 
            }else{
              this.$globalMsg.error(res.message)
            }
          })
        }
      })
    },
    statusChange(){
      if(this.formInline.status=='31'){
        this.reasonFlag=false;
        this.formInline.rejectReason='';
      }else{
        this.reasonFlag=true;
      }
    },
    resonDetail(val){
      this.getReason(val).then(arr=>{
        this.options3=arr;
      })
    }
  },
  mounted(){
    this.getReason().then(arr=>{
      this.options2=arr;
    }),
    this.getRejectDay().then(arr=>{
      this.options4=arr;
    })
  }
}
</script>
<style scoped lang="scss">
.detail{
    background:#fff;
    padding:0 20px;
    font-size: 14px;
}
.title{
    color: #1D7BFF;
    font-weight: bold;
    font-size: 14px;  
}
</style>